<template>
	<view>
		<view class="tab">
			<view class="tabItem" :class="{'tabItem_active':tabIndex == index}" v-for="(item,index) in tabList" :key="index"
			 @tap="switchTab(index)">{{item}}</view>
		</view>
		<view class="none" v-if="isPage && orderList.length == 0">暂无订单</view>
		<view class="orderList" v-else>
			<CardOrder @event="styleclick" :options="item.orderStatus == 0 ? true : false" :order-no="item.orderNo"
			 :order-status="item.orderStatusName" :order-pay="item.pay" :order-dis="item.discount" :order-fare="item.fare" v-for="(item,index) in orderList"
			 :key="index">
				<CardMsg :item-id="item.orderId" :src="item.orderImage" :name="item.orderName" :price="item.price" number="数量:999份; 19年，高三" />
			</CardOrder>
			<uni-load-more v-if="orderList.length >= 6" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue";
	import CardOrder from "@/components/cardStyle/o-card.vue";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			CardMsg,
			CardOrder,
			uniLoadMore
		},
		data() {
			return {
				tabIndex: 0, //选项卡索引
				tabList: ['全部', '进行中', '成功', '失败'], //选项卡列表
				orderList: [{
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 0, //订单状态
					orderId: '001', //商品ID
					orderName: '五年高考三年模拟001', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
				}, {
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 1, //订单状态
					orderId: '002', //商品ID
					orderName: '五年高考三年模拟002', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
				}, {
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 2, //订单状态
					orderId: '003', //商品ID
					orderName: '五年高考三年模拟003', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
				}, {
					orderNo: '202103543956905775024420', //订单编号
					orderStatus: 3, //订单状态
					orderId: '004', //商品ID
					orderName: '五年高考三年模拟004', //商品名称
					orderImage: 'http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg', //商品图片
					discount: '1500.00', //优惠数额
					pay: '1566.00', //实付金额
					fare: '110.00', //运费
					price: '299.00', //商品价格
				}],
				page: 1,
				reload: true,
				isPage: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.publicFunc();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getOrder();
			}, 500);
		},
		onShow() {
			this.publicFunc();
		},
		onLoad(e) {
			if (e.type) {
				this.tabIndex = e.type;
			}
		},
		methods: {
			// 获取订单列表
			getOrder() {
				if (this.page == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
				}
				this.orderList.forEach((item, index) => {
					item.orderStatusName = item.orderStatus == 0 ? '待付款' : item.orderStatus == 1 ? '待发货' : item.orderStatus == 2 ?
						'待收货' : item.orderStatus == 3 ? '待评价' : '未知状态';
				})
				// if (res.data.code == 200 && data.list.length > 0) {
				// 	this.orderList = this.reload ? list : this.orderList.concat(list);
				// 	this.reload = false;
				// 	this.status = 'more';
				// } else {
				// 	if (this.reload) {
				this.orderList = [];
				this.isPage = true;
				// 	} else {
				// 		this.status = 'noMore';
				// 	}
				// }
				uni.hideLoading();
			},
			// 公用方法
			publicFunc() {
				this.page = 1;
				this.reload = true;
				this.isPage = false;
				this.orderList = [];
				this.getOrder();
			},
			// 切换选项卡
			switchTab(index) {
				if (this.tabIndex != index) {
					this.tabIndex = index;
				}
			}
		}
	}
</script>

<style>
	.orderList {
		margin-top: 116upx;
	}

	.card_style_order__container {
		margin-top: 20upx;
	}
</style>
